<template>
  <div class="container">
    <div style="padding:10px 0;">
        <div style="padding:15px;border:1px solid #eee;">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/resourceUpload' }">媒资上传</el-breadcrumb-item>
                <el-breadcrumb-item>上传记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <div>
      <div style="padding:10px 0;">
        <div style="padding:15px;border:1px solid #eee;display:flex;align-items: center;">
            <span style="padding: 8px">上传状态：</span>
            <el-radio-group v-model="query.status" @change="initAjaxMethod">
              <el-radio :label="-1">全部</el-radio>
              <el-radio :label="0">上传中</el-radio>
              <el-radio :label="1">上传成功</el-radio>
              <el-radio :label="2">上传失败</el-radio>
            </el-radio-group>
        </div>
      </div>
      <el-table
          :data="tableData"
          border
          ref="multipleTable"
          header-cell-class-name="table-header"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column> -->
          <el-table-column label="序号" width="55">
            <template slot-scope="scope">{{
              scope.$index + (query.pageIndex - 1) * query.pageSize + 1
            }}</template>
          </el-table-column>
          <el-table-column label="文件名" align="center">
            <template slot-scope="scope">{{ scope.row.title }}</template>
          </el-table-column>
          <el-table-column label="类型" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.type == 0">图片</span>
                <span v-if="scope.row.type == 1">视频</span>
            </template>
          </el-table-column>
          <el-table-column label="上传状态" align="center">
            <template slot-scope="scope">
              <p :id="'upload_progress_status'+scope.row.id" style="display:block;"> 
                <span v-if="scope.row.status == 0">上传中</span>
                <span v-if="scope.row.status == 1" style="color:#67C23A">上传成功</span>
                <span v-if="scope.row.status == 2" style="color:#F56C6C">上传失败</span>
              </p>
              <p :id="'upload_progress_progress'+scope.row.id" style="display:none;">
                <el-progress :percentage="0"  :id="'upload_progress_log'+scope.row.id"></el-progress>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope" v-if="scope.row.status == 2 && roulShowList.btn1.type">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="againUpload(scope.row)" style="padding-right:20px;">重新上传</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            layout="sizes,total, prev, pager, next, jumper"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :page-sizes="[10,20, 50, 100, 150, 200]"
            @size-change="handleSizeChange"
            :total="pageTotal"
            @current-change="handlePageChange"
          ></el-pagination>
        </div>  
    </div>
  </div>
</template>
<script>
import bus from '@/common/bus';
export default {
  data() {
    return {
      query:{
        pageIndex:1,
        pageSize:10,
        status:-1
      },
      activeName:'1',
      pageTotal:0,
      percentage: 20,
      customColor: '#409eff',
      customColors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      tableData:[1],
      imgPath: this.$API.CrmImagesUrl,
      isMobile: this.$isMobile,
      newsList: [],
      perData: [],
      nextData: [],
      currentDetail: {},
      classOption: {
          limitMoveNum: 3,
          direction: 2,
      },
      currentIndex:0,
      type:null,
      exhibition_id:'',
      channel_id:'',
      roulShowList: {
          btn1: { rule: 'homepage,upload,upload', type: false, name: '上传' }
      },
    };
  },
  filters: {
    getdate(val) {
      if (!val) return "";
      return getdate(val, ".");
    },
  },
  mounted() {
    bus.$on('log-uploader-change', (id,status) => {
        this.$nextTick(()=>{
          document.querySelector('#upload_progress_log'+id).querySelector('.el-progress-bar__inner').style.width=status.progress+'%';
          document.querySelector('#upload_progress_log'+id).querySelector('.el-progress-bar__inner').style.backgroundColor=status.type=='error'?'red':(status.type=='md5'?'#67C23A':'#409eff');
          document.querySelector('#upload_progress_log'+id).querySelector('.el-progress__text').innerHTML=status.progress+'%';
          document.querySelector('#upload_progress_status'+id).style.display='none';
          document.querySelector('#upload_progress_progress'+id).style.display='block';
        })
        if(status.type == 'success' || status.type == 'error'){
          // console.log('status',status)
          clearTimeout(this.timers);
          this.timers=setTimeout(()=>{
            document.querySelector('#upload_progress_status'+id).style.display='block';
            document.querySelector('#upload_progress_progress'+id).style.display='none';
            this.initAjaxMethod();
          },100)
        }
    });
    this.initAjaxMethod();
    this.roleMethod();
  },
  methods: {
    handleSelectionChange(){

    },
    handleSizeChange(val) {
      this.query.pageSize=val;
      this.initAjaxMethod();
    },
    handlePageChange(val){
      this.query.pageIndex=val;
      this.initAjaxMethod();
    },
    initAjaxMethod() {
      this.$http.post(this.$API.MEDIA_FILE_UPLOD_INDEX, {page:this.query.pageIndex,listRows:this.query.pageSize,status:this.query.status == -1?'':this.query.status})
        .then((res) => {
          // console.log("news", res);
          if (res.code == 1) {
            let list = Array.isArray(res.data.data) ? res.data.data:[];
            this.pageTotal=res.data.total;
            this.tableData=list;
          }
        })
    },
    againUpload(data){
      bus.$emit('alone-uploader-open', true,{isListUp:true,media_file_id:data.id,uploadId:data.id,media_id:data.media_id,type:data.type});
    },
    roleMethod(){
      this.$http.post(this.$API.GET_TRR_PAGE, { rule: 'homepage,upload' }).then((res) => {
            // console.log('页面权限', res);
            if (res.data === 'admin') {
                for (let i in this.roulShowList) {
                    this.roulShowList[i].type = true;
                }
            } else {
                res.data.forEach((item) => {
                    for (let j in this.roulShowList) {
                        if (item.rule == this.roulShowList[j].rule) {
                            this.roulShowList[j].type = true;
                        }
                    }
                });
            }
        });
    }
  },
};
</script>
<style lang="less">
  .container{
    padding:20px;
    
  }
</style>


